/*
 * @Author: wjc
 * @Date: 2025-07-28 10:11:16
 * @LastEditors: wjc
 * @LastEditTime: 2025-10-30 17:34:33
 * @Description:
 */
import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'
import presetWind4 from '@unocss/preset-wind4'
import transformerDirectives from '@unocss/transformer-directives'
import { defineConfig, presetIcons } from 'unocss'

import iconList from './src/utils/icons'

function createColorsPalette(name: string) {
  return {
    50: `hsl(var(--${name}-50))`,
    100: `hsl(var(--${name}-100))`,
    200: `hsl(var(--${name}-200))`,
    300: `hsl(var(--${name}-300))`,
    400: `hsl(var(--${name}-400))`,
    500: `hsl(var(--${name}-500))`,
    600: `hsl(var(--${name}-600))`,
    700: `hsl(var(--${name}-700))`,
    // 800: `hsl(var(--${name}-800))`,
    // 900: `hsl(var(--${name}-900))`,
    // 950: `hsl(var(--${name}-950))`,
    // 激活状态下的颜色，适用于按钮按下时的背景色或边框色。
    active: `hsl(var(--${name}-700))`,
    // 浅色背景，适用于输入框或表单区域的背景。
    'background-light': `hsl(var(--${name}-200))`,
    // 适用于略浅的背景色，通常用于次要背景或略浅的区域。
    'background-lighter': `hsl(var(--${name}-100))`,
    // 最浅的背景色，适用于非常轻微的阴影或卡片的背景。
    'background-lightest': `hsl(var(--${name}-50))`,
    // 适用于普通边框，可能用于按钮或卡片的边框。
    border: `hsl(var(--${name}-400))`,
    // 浅色边框，适用于输入框或卡片的边框。
    'border-light': `hsl(var(--${name}-300))`,
    foreground: `hsl(var(--${name}-foreground))`,
    // 鼠标悬停状态下的颜色，适用于按钮悬停时的背景色或边框色。
    hover: `hsl(var(--${name}-600))`,
    // 主色文本
    text: `hsl(var(--${name}-500))`,
    // 主色文本激活态
    'text-active': `hsl(var(--${name}-700))`,
    // 主色文本悬浮态
    'text-hover': `hsl(var(--${name}-600))`,
  }
}

const uiColors = {
  accent: {
    DEFAULT: 'hsl(var(--accent))',
    foreground: 'hsl(var(--accent-foreground))',
    hover: 'hsl(var(--accent-hover))',
    lighter: 'hsl(var(--accent-lighter))',
  },
  background: {
    deep: 'hsl(var(--background-deep))',
    DEFAULT: 'hsl(var(--background))',
  },
  border: {
    DEFAULT: 'hsl(var(--border))',
  },
  card: {
    DEFAULT: 'hsl(var(--card))',
    foreground: 'hsl(var(--card-foreground))',
    sub: 'hsla(var(--card-sub))',
  },
  destructive: {
    ...createColorsPalette('destructive'),
    DEFAULT: 'hsl(var(--destructive))',
  },

  foreground: {
    DEFAULT: 'hsl(var(--foreground))',
  },

  input: {
    background: 'hsl(var(--input-background))',
    DEFAULT: 'hsl(var(--input))',
  },
  muted: {
    DEFAULT: 'hsl(var(--muted))',
    foreground: 'hsl(var(--muted-foreground))',
  },
  popover: {
    DEFAULT: 'hsl(var(--popover))',
    foreground: 'hsl(var(--popover-foreground))',
  },
  primary: {
    ...createColorsPalette('primary'),
    sub: 'hsl(var(--primary-sub))',
    border: 'hsl(var(--primary-border))',
    DEFAULT: 'hsl(var(--primary))',
  },

  ring: 'hsl(var(--ring))',
  secondary: {
    DEFAULT: 'hsl(var(--secondary))',
    desc: 'hsl(var(--secondary-desc))',
    foreground: 'hsl(var(--secondary-foreground))',
  },
}

const customColors = {
  green: {
    ...createColorsPalette('green'),
    foreground: 'hsl(var(--success-foreground))',
  },
  header: {
    DEFAULT: 'hsl(var(--header))',
  },
  heavy: {
    DEFAULT: 'hsl(var(--heavy))',
    foreground: 'hsl(var(--heavy-foreground))',
  },
  main: {
    DEFAULT: 'hsl(var(--main))',
  },
  overlay: {
    content: 'hsl(var(--overlay-content))',
    DEFAULT: 'hsl(var(--overlay))',
  },
  red: {
    ...createColorsPalette('red'),
    foreground: 'hsl(var(--destructive-foreground))',
  },
  sidebar: {
    deep: 'hsl(var(--sidebar-deep))',
    DEFAULT: 'hsl(var(--sidebar))',
  },
  success: {
    ...createColorsPalette('success'),
    DEFAULT: 'hsl(var(--success))',
    foreground: 'hsl(var(--success-foreground))',
    'foreground-border': 'hsl(var(--success-foreground-border))',
  },
  warning: {
    ...createColorsPalette('warning'),
    DEFAULT: 'hsl(var(--warning))',
  },
  danger: {
    ...createColorsPalette('danger'),
    DEFAULT: 'hsl(var(--danger))',
  },
  yellow: {
    ...createColorsPalette('yellow'),
    foreground: 'hsl(var(--warning-foreground))',
  },
  placeholder: {
    DEFAULT: 'var(--placeholder)',
  },
}

export default defineConfig({
  presets: [
    presetWind4(),
    presetIcons({
      mode: 'mask',
      scale: 1,
      extraProperties: {
        display: 'inline-block',
      },
      customizations: {
        iconCustomizer(collection, icon, props) {
          props.width = '1em'
          props.height = '1em'
        },
      },
      collections: {
        custom: FileSystemIconLoader('./src/assets/icons/'),
        ep: () => import('@iconify-json/ep/icons.json').then((i) => i.default),
      },
    }),
  ],
  transformers: [transformerDirectives()],
  rules: [
    [/^max-w-(\s+)$/, ([, d]) => ({ 'max-width': `${d}` })],
    [/^max-h-[(\s+)]$/, ([, d]) => ({ 'max-height': `${d}` })],
    [/^wh-(\d+)px$/, ([, d]) => ({ width: `${d}px`, height: `${d}px` })],
  ],
  safelist: ['dark', ...iconList],
  shortcuts: {
    'wh-full': 'w-full h-full',
    'mp-0': 'm-0 p-0',
    'absolute-x-center': 'absolute left-50% translate-x--50%',
    'inline-flex-center': 'inline-flex justify-center items-center',
    // 布局相关
    'flex-center': 'flex items-center justify-center',
    'flex-col-center': 'flex flex-col items-center justify-center',
    'flex-x-center': 'flex justify-center',
    'flex-y-center': 'flex items-center',
    // 轮廓框组件
    'outline-box': 'relative cursor-pointer rounded-md p-1 outline outline-1 outline-border',
    'outline-box::after':
      'absolute left-1/2 top-1/2 z-20 h-0 w-[1px] rounded-sm opacity-0 outline outline-2 outline-transparent transition-all duration-300 content-[""]',
    'outline-box-active': 'outline-primary outline outline-2',
    'outline-box-active::after': 'hidden',
    'outline-box:not(.outline-box-active):hover::after':
      'outline-primary left-0 top-0 h-full w-full p-1 opacity-100',
    // 链接样式
    'nice-link': 'text-primary hover:text-primary-hover active:text-primary-active cursor-pointer',
    // 卡片样式
    'card-box': 'bg-card text-card-foreground border-border rounded-xl border',
  },
  theme: {
    animation: {
      // 1. 关键帧定义：值为字符串格式的 CSS 关键帧内容
      keyframes: {
        'accordion-down':
          '{from { height: 0; } to { height: var(--radix-accordion-content-height); }}',
        'accordion-up':
          '{from { height: var(--radix-accordion-content-height); } to { height: 0; }}',
        'collapsible-down':
          '{from { height: 0; } to { height: var(--radix-collapsible-content-height); }}',
        'collapsible-up':
          '{from { height: var(--radix-collapsible-content-height); } to { height: 0; }}',
        float:
          '{0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); }}',
      },
      // 2. 动画时长：对应原动画的时长参数
      durations: {
        'accordion-down': '0.2s',
        'accordion-up': '0.2s',
        'collapsible-down': '0.2s',
        'collapsible-up': '0.2s',
        float: '5s',
      },
      // 3. 动画 timing-function：对应原动画的缓动曲线
      timingFns: {
        'accordion-down': 'ease-out',
        'accordion-up': 'ease-out',
        'collapsible-down': 'ease-in-out',
        'collapsible-up': 'ease-in-out',
        float: 'linear', // 原 float 动画的 linear 缓动
      },
      // 4. 动画延迟：原 float 动画延迟为 0ms，可省略（默认 0），如需自定义可添加
      delays: {
        // 示例：若需给 float 加延迟，可写 float: '0ms'，此处按原配置省略
      },
      // 5. 动画重复次数：原 float 动画为 infinite（无限循环）
      counts: {
        float: 'infinite',
        // 其他动画默认 1 次，可省略
      },
      // 6. 动画附加属性：如需给动画加额外 CSS 属性，可在此定义（原配置无额外属性，可省略）
      properties: {
        // 示例：若需给 float 加 transform-origin，可写 float: { 'transform-origin': 'center' }
      },
    },
    borderRadius: {
      sm: 'calc(var(--radius) - 4px)',
      md: 'calc(var(--radius) - 2px)',
      lg: 'var(--radius)',
      xl: 'calc(var(--radius) + 4px)',
    },
    boxShadow: {
      float: `0 6px 16px 0 rgb(0 0 0 / 8%),
          0 3px 6px -4px rgb(0 0 0 / 12%),
          0 9px 28px 8px rgb(0 0 0 / 5%)`,
    },
    breakpoints: {
      xs: '480px',
      sm: '800px',
      md: '992px',
      lg: '1200px',
      xl: '1920px',
      xxl: '2560px',
      xxxl: '3840px',
    },
    fontSize: {
      xs: '0.875rem',
      s: '1rem',
      default: '1.125rem',
      lg: '1.5rem',
      xl: '2rem',
    },
    colors: {
      ...customColors,
      ...uiColors,
    },
    fontFamily: {
      sans: ['var(--font-family)'],
    },
    zIndex: {
      '100': '100',
      '1000': '1000',
    },
  },
})
